import React from "react";
import { Form, Input, Button, Checkbox } from "antd";
import axios from "axios";
import { connect } from "react-redux";
import { login } from "../../api";
function Login(props: any) {
	const { role, setRole } = props;
	const onFinish = (values: any) => {
		login().then((res: any) => {
			console.log(res);

			if (res.success) {
				setRole(res.data.role);
				props.history.push("/layout/dashboard");
			}
		});
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};
	return (
		<div>
			{/* 登录 登录完成后把login存到全局状态管理 */}
			<Form
				name="basic"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 16 }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
			>
				<Form.Item
					label="Username"
					name="username"
					rules={[
						{
							required: true,
							message: "Please input your username!",
						},
					]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="Password"
					name="password"
					rules={[
						{
							required: true,
							message: "Please input your password!",
						},
					]}
				>
					<Input.Password />
				</Form.Item>

				<Form.Item
					name="remember"
					valuePropName="checked"
					wrapperCol={{ offset: 8, span: 16 }}
				>
					<Checkbox>Remember me</Checkbox>
				</Form.Item>

				<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
					<Button type="primary" htmlType="submit">
						Submit
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
}

const mapStateToProps = (state: any) => {
	return {
		role: state.role,
	};
};
const mapActionToProps = (dispatch: any) => {
	return {
		setRole: (role: any) => {
			dispatch({ type: "SET_ROLE", data: role });
		},
	};
};

export default connect(mapStateToProps, mapActionToProps)(Login);
